@extends('linfeng.home.person')
@section('title','完善信息')

@section('first-person')

    <div class="setting-detail" id="stthld" style="display: block;">
        <div class="detail-bg"></div>
        <div style="font-size:14px;padding:20px;" class="modal-content">

             <div class="plzhld clearfix">
            <div class="mod-setting-profile">
                <div class="setting-profile-title yahei">基本资料</div>
                <form id="profile" class="setting-profile-form" action="{{url('home/Person/upread')}}" method="post">
                    {{csrf_field()}}
                    <table class="setting-profile-table ">
                        <tbody>
                            <tr>
                                <th>性别:</th>
                                <td class="line30">
                                    <label><input type="radio" name="sex" checked value="1">男</label>
                                    <label><input type="radio" name="sex" value="2">女</label>
                                    <label><input type="radio" name="sex" value="3">保密</label>
                                </td>
                            </tr>
                            <tr>
                                <th>生日:</th>
                                <td>
                                    <div class="mod-cus-sel">
                                        <input type="date"  name="birthday" >
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>居住地:</th>
                                <td>
                                    <div class="mod-cus-sels">
                                        <select id="prov" name="prov" class="prov form-contro1" style="border-radius:0;"></select>
                                        <select id="city" name="city" class="city form-contro1" style="border-radius:0;"></select>
                                        <select id="area" name="area" class="area form-contro1" style="border-radius:0;"></select>
                                        <select id="street" name="street" class="street form-contro1" style="border-radius:0;"></select>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th class="personal-detail-th" style="float:left;">个人简介:</th>
                                <td class="personal-detail-td">
                                    <textarea name="desc" id="passport_userdetail" class="mod-cus-input mod-cus-input-4">
                                    </textarea>
                                    <span class="mod-cus-input-tip"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    @if(!empty(session('upread')))
                        <script>alert('{{session('upread')}}')</script>
                        @endif
                    <input style="margin-left:90px;width:100px;" type="submit" class="btn btn-success" value="保存">
                    @if(!empty(session('add_xx')))
                        <script>alert('保存成功!')</script>
                    @endif
                </form>
            </div>
        </div>
        </div>
    </div>
    {{--ajax请求--}}
    <script>
        $(function() {
            // 1.载入页面完成后即对php请求数据添加省一级列表项
            $.ajax({
                url: "{{url('home/user/vip/lis')}}",
                type: 'get',
                data:'upid=0',
                success: function (data) {
//                    alert(data);
                    for (var i = 0; i < data.length; i++) {
                        $('#prov').append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
                    }

                },

                error: function () {
                    alert('出错啦,请联系管理员');
                },
                dataType: 'json',
                // 同步,如果没有第一级的数据第二级触发自动为0
                async: false
            });

            // 2.当前三级出现change事件时触发ajax获取value当做upid寻找下一级数据
            $('#prov,#city,#area').change(function(){
                var $upid = $(this).val();
                // 在外层用变量存储$(this);
                var $_this = $(this);

                // 根据传入的upid为下一级select添加选项
                $.ajax({
                    url:'{{url('home/user/vip/lis')}}',
                    data:'upid='+$upid,
                    success:function(data){

                        // 判断数据是否存在,如果没有隐藏下几级
                        if(!data){
                            $_this.nextAll('select').hide();
                            return;
                        }
                        //在添加新数据之前清空select
                        $_this.next('select').empty().show();

                        for(var i = 0;i < data.length;i++){
                            $_this.next('select').append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                        };

                        //添加完为下一级选中一下
                        $_this.next('select').trigger('change');
                    },
                    error:function(){
                        alert('出错啦,请联系管理员');
                    },
                    dataType:'json',
                });

            })
            // 手动触发第一个
            $('#prov').trigger('change');
        })

    </script>
@endsection